<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title</title>
		<style type="text/css">
			select {
				width: 200px;
				background-color: teal;
				height: 200px;
				font-size: 20px;
			}
			.btn-box {
				width: 30px;
				display: inline-block;
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<h1>城市选择：</h1>
		<select name="src-city" id="src-city" multiple="multiple">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">深圳</option>
			<option value="4">广州</option>
			<option value="5">西红市</option>
		</select>
		<div class="btn-box">
			<!--实体字符-->
			<button id="btn1"> &gt;&gt; </button>
			<button id="btn2"> &lt;&lt; </button>
			<button id="btn3"> &gt;</button>
			<button id="btn4"> &lt; </button>
		</div>
		<select id="tar-city" name="tar-city" multiple>
		</select>
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$("#src-city>option").appendTo("#tar-city");
				});
				$("#btn2").click(function(){
					$("#src-city").append($("#tar-city>option"));
				});
				$("#btn3").click(function(){
					$("#src-city>option:selected").appendTo("#tar-city");
				});
				$("#btn4").click(function(){
					$("#src-city").append($("#tar-city>option:selected"));
				});
			});
		</script>
	</body>
</html>